"use client"

import { motion,useScroll,useSpring } from 'framer-motion'
import { useRef } from 'react'

/**
 * 滚动监听
 * @constructor
 */
export default function Scroll(){

  const ref = useRef();


  const {scrollYProgress} = useScroll({container:ref})
  const scaleX = useSpring(scrollYProgress,{
    stiffness: 100,
    damping: 30,
    restDelta: 0.0001
  })
  return(
    <section className={"w-1/2 p-5 bg-indigo-50 mx-auto mt-10"}>
      <motion.div className={"h-3 bg-green-500 origin-left"} style={{scaleX: scaleX}}></motion.div>
      <div className={"h-96 overflow-y-scroll my-3"} ref={ref}>
        <div className={"h-screen font-mono p-3 text-black"}>
          <h1 className={"text-3xl text-center mb-10"}>
            useScroll with useSpring
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur culpa expedita fuga quisquam temporibus totam? Cumque dolorem illum ipsam laborum modi molestias praesentium quis. Earum esse quaerat vitae voluptates.
          </p>
        </div>
      </div>
    </section>
  )
}
